import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import { Form, Row, Col, Select } from 'antd';
import StandardTable from '@/components/StandardTable';
import moment, { isDate } from 'moment';
import AntdForm from '@/components/AntdForm';
import AdSelect from '@/components/AdSelect';
import AdButton from '@/components/AdButton';
import AntdFormItem from '@/components/AntdFormItem';
import AntdInput from '@/components/AntdInput';
import AntdDatePicker from '@/components/AntdDatePicker';
import AdUpload from '@/components/AdUpload';
import FileReader from '@/components/FileReader';
import SelectForm from '@/components/SelectForm';
import SearchSelect from '@/components/SearchSelect';
import { columns1 } from '@/pages/Common/common';
import { queryDictData, formatFile, vitifyCheck, queryDict, formatPrice } from '@/utils/common';
import { allDictList, billStateOnlyReadList } from '@/utils/constans';
import {
  allDispatchType,
  selectArchivesDetailAndInfo,
  renderTableAdSelect,
  codes,
  saveAllValues,
} from './utils';

import styles from './archives.less';
import OilInfoForm from './OilInfoForm';
const { Option } = Select;

@connect(({ Archives, component, loading }) => ({
  dictObject: component.dictObject,
  archivesDetail: Archives.archivesDetail,
  oilInfoList: Archives.oilInfoList,
  loading: loading.effects[allDispatchType.oilInfoList],
  // formValues: Archives.formValues,
}))
@Form.create()
export default class ArchivesInfo extends Component {
  state = {
    detailId: '',
    selectedRows: [],
    checkId: '',
    type: '',
    cars: [],
    formValues: {},
  };
  className = 'archives-table-info';

  componentDidMount() {
    const { detailId, oilInfoList, type } = this.props;
    this.handleStateChange([{ type: type }]);
    if (!oilInfoList[detailId]) this.oilInfoList();
  }

  componentWillMount() {
    const allDict = [allDictList.oilType];
    queryDict({ props: this.props, allDict });
  }

  oilInfoList = (param = {}) => {
    const { dispatch, archivesDetail, detailId } = this.props;
    param.id = detailId;
    dispatch({
      type: allDispatchType.oilInfoList,
      payload: {
        ...param,
      },
    });
  };

  //详情
  showDetail = checkId => {
    const { dispatch, setOilInfoModal } = this.props;
    console.log('测试 测试？',checkId)
    dispatch({
      type:'Archives/refreshOil',
      payload:{id:checkId},
      callback:(res)=>{
        console.log('中港车----',res);
        setOilInfoModal('edit');
        this.handleStateChange([{ checkId, type: 'edit' }]);
      }
    })
    
  };

  renderInfo = (text, record) => {
    const { mode } = this.props;
    return (
      <AdButton
        mode="a"
        onClick={() => this.showDetail(record.id)}
        text={text}
        code={codes.editOil}
      />
    );
  };

  handleStateChange = (options = []) => {
    options.map(item => {
      this.setState(item);
    });
  };

  oilColumns = [
    {
      title: '单据号',
      dataIndex: 'oilNo',
      render: (text, record) => this.renderInfo(text, record),
      width: 120,
    },
    {
      title: '状态',
      dataIndex: 'billStatus',
      width: 80,
      render: (text, record) => (
        <AdSelect
          onlyRead={true}
          value={text ? text : record.status}
          data={billStateOnlyReadList}
        />
      ),
    },
    {
      title: '加油时间',
      dataIndex: 'oilTime',
      width: 120,
    },
    {
      title: '加油人',
      dataIndex: 'oilPerson',
      width: 100,
    },
    {
      title: '加油方式',
      dataIndex: 'oilType',
      width: 80,
      render: text =>
        renderTableAdSelect({ props: this.props, value: text, key: allDictList.oilType }),
    },
    {
      title: '当前里程(KM)',
      dataIndex: 'mileage',
      width: 100,
    },
    {
      title: '加油量（L）',
      dataIndex: 'oilAmount',
      width: 100,
    },
    {
      title: '金额',
      dataIndex: 'totalFee',
      width: 100,
      render: text => <span>{formatPrice(text)}</span>,
    },
    {
      title: '单价',
      dataIndex: 'price',
      width: 100,
      render: text => <span>{formatPrice(text)}</span>,
    },
    {
      title: '币种',
      width: 100,
      dataIndex: 'currencyType',
      render: text =>
        renderTableAdSelect({
          props: this.props,
          value: text,
          key: allDictList.currencyType,
        }),
    },
  ];

  handleStandardTableChange = param => {
    this.oilInfoList(param);
  };

  render() {
    const {
      oilInfoList,
      form,
      setOilInfoModal,
      visibleOperate,
      loading,
      onSelectRow,
      mode,
      type,
      status,
      dictObject,
      detailId,
      disabled,
    } = this.props;

    const { selectedRows, bindSelectedRows, checkId } = this.state;
    const commonParams = {
      getFieldDecorator: form.getFieldDecorator,
    };

    return (
      <Fragment>
        {visibleOperate && (
          <OilInfoForm
            type={type}
            mode={mode}
            setOilInfoModal={() => setOilInfoModal()}
            visibleOperate={visibleOperate}
            id={type == 'edit' ? checkId : ''}
            archivesId={detailId}
            oilInfoList={this.oilInfoList}
            disabled={disabled}
          />
        )}

        <StandardTable
          disabledRowSelected={mode === 'detail' || status}
          loading={loading}
          selectedRows={selectedRows}
          onSelectRow={selectedRows => {
            onSelectRow && onSelectRow(selectedRows);
            this.handleStateChange([{ selectedRows }]);
          }}
          data={oilInfoList[detailId] || {}}
          columns={this.oilColumns}
          // scrollX={2000}
          onPaginationChange={this.handleStandardTableChange}
        />
      </Fragment>
    );
  }
}
